<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*
            匹配指定元素p中带有指定属性的元素
         */
        /*p[name]{*/
            /*color: red;*/
        /*}*/
        /*
            匹配指定元素p中带有指定属性name的元素
            且name的属性值为n1
         */
        /*p[name='n1']{*/
            /*color: red;*/
        /*}*/
        /*
            匹配指定元素p中带有指定属性name的元素
            且name的属性值以n开头
         */
        /*p[name^='n']{*/
            /*color: red;*/
        /*}*/
        /*
            匹配指定元素p中带有指定属性name的元素
            且name的属性值以1结尾
         */
        /*p[name$='1']{*/
            /*color: red;*/
        /*}*/
        /*
            匹配指定元素p中带有指定属性name的元素
            且name的属性值中包含n
         */
        p[name*='n']{
            color: red;
        }
    </style>
</head>
<body>
<p name="n1">第1个段落</p>
<p name="a1">第2个段落</p>
<p>第3个段落</p>
<p name="n2">第4个段落</p>
<p name="pn1">第5个段落</p>
</body>
</html>